前言

基礎架構學習完後，就是將架構妝點得更美觀、豐富，這部分就要依靠CSS來完成啦～
剛開始，替字的顏色變更、背景色彩的改變、加上不同的圖片...等，都覺得豐富有趣，特別是將網頁一步步完成後，並推送到 Github 所直接看到的成果，相信大家都會感到很有成就感吧！
但，隨著練習的版型越來越複雜，容器的間隔、排版，有時又會跑掉，時不時還會直接打掉重練啊！

今天就先來點基礎介紹吧！

我的基礎學習路徑

1.從 MDN 可以學習到 CSS 是什麼、基本結構如何組成，以及選擇器介紹。
2. 在freeCodeCamp，可以依照任務一關一關的練習，同時也能夠再根據題目來觀察它的 HTML 是如何撰寫。

就說說2個重點

1. 單位：字體大小的設定，相當影響版面看起來的感覺，以及使用者閱讀的感受。剛開始也花了好多時間，在弄清楚單位之間的關係。
   (1) px 絕對長度單位，直接設定調整大小(such as font-size: 12px))
   (2) em 相對長度單位，相對於該元素本身字體大小（font-size 屬性）的值。

麥克的半路出家筆記

/*舉以下 CSS 做計算範例：*/

.container {
 font-size: 20px;
 padding: 1em;
 margin-top: .5em; 
 border-radius: .2em;
}

• 針對 .container 元素「本身」及其「子元素」（假設子元素皆無設定 font-size 屬性值），1em 單位就是 20px，因此：
  • padding 屬性值為 20px = 1 * 20
  • margin-top 屬性值為 10px = 0.5 * 20
  • border-radius 屬性值為 4px = 0.2 * 20

2. 權重：剛開使不知道有權重的差別，在 Bootstrap 除了想使用內部原本就有的樣式之外，但還想去客製化想要的邊寬、顏色等等，總是不知道怎麼修改，但知道權重差別後，就可以針對他原本的class名稱，再去增加權重覆蓋掉它原本的樣式。

• 當有css設定衝突時，你的宣告越特別的設定會越優先。
  閱讀下方圖片：
  • 順序：從上至下，由左至右
  • 每個小圖：說明有含element,class,attribute,ID，這些就是計算權重的依據
  • 小圖的右下角數字：數字愈大權重愈高，層級愈高權重愈高。例如：0 – 0 – 12 的權重會大於 0 – 0 – 2。 0 – 0 – 12 的權重會小於 0 – 1 – 0。
  • 六角學院 - 伸縮自如的 RWD 排版術(上)，在 36:45 ，老師有提到一些權重的觀念，也滿清楚的。